<template>
	<view class="wanl-search">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px','line-height': $wanlshop.wanlsys().height + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" maxlength="12" placeholder-style="color: #ccc"  v-model="keywords" placeholder="请输入搜索内容" />
					
				</view>
				<view class="searchtijiao" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
					<button :style="{ height: $wanlshop.wanlsys().height + 'px','line-height': $wanlshop.wanlsys().height + 'px'}" @click="searchconfirm">搜索</button>
				</view>
			</view>
			
		</view>
		
		<view class="goods-list">
			<view 
				v-for="(item, index) in goodsList" :key="index"
				class="goods-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					
					<image :src="item.imageList['0']" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.name}}</text>
				<view class="price-box">
					<text class="price">￥{{item.skuList['0'].skuChannels['0'].price}}</text>
					
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType" v-if="page>0"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			
			loadingType:'more',
			keywords:'',
			goodsList: [],
			page:0,
			status: true,
			
		};
	},
	components: {
		uniLoadMore	
	},
	onLoad(option) {
		if (option.keywords) this.keywords = option.keywords;
	},
	onReachBottom() {
		//判断是否最后一页
		
			this.searchconfirmagain();
			},
	methods: {
		
		searchconfirm() {
			console.log(1);
				this.page=1;
			
			if(this.keywords==''){
				this.$wanlshop.msg('请输入搜索内容');
			}
			this.$api.get({
				url: '/wanlshop/huidinghuo/search',
				data: { keywords: this.keywords,page:this.page },
				success: res => {
					this.status = res.length ==0 ? false : true;
					// console.log(this.status);
					this.goodsList=res;
					this.loadingType = res.length ==0 ? 'nomore' : 'more';
					// this.search = res;
					
				}
			});
		},
		searchconfirmagain() {
			console.log(2);
			if(this.status){
				this.page=this.page+1;
			}
			if(this.keywords==''){
				this.$wanlshop.msg('请输入搜索内容');
			}
			this.$api.get({
				url: '/wanlshop/huidinghuo/search',
				data: { keywords: this.keywords,page:this.page },
				success: res => {
					this.status = res.length ==0 ? false : true;
					
					this.goodsList=this.goodsList.concat(res);
					this.loadingType = res.length ==0 ? 'nomore' : 'more';
					// this.search = res;
					
				}
			});
		},
		//详情
		navToDetailPage(item){
			//测试数据没有写id，用title代替
			let id = item.title;
			uni.navigateTo({
				url: `/pages/huidinghuo/productdetails?id=`+item.id
			})
		},
		
		
		
		
		
	}
};
</script>

<style>
page {
	background: #ffffff;
}

.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: 26rpx;
			color: $font-color-dark;
			height: 80upx;
			line-height: 40upx;
			overflow: hidden;
			
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
.searchtijiao button{
	margin: 0;
	    padding: 15rpx 20px;
	    display: inline;
		margin-right: 20rpx;
		border: 0px solid white !important;
		background:none ;
}
.searchtijiao button:after {
	border: 0px solid white !important;
	}
	
.cu-custom .search-form{
	border: 3rpx solid #fe6600;
	background-color: #fff;
}

.cu-bar{
	border-bottom: 10rpx solid #f7f7f7;
	background: white;
}
</style>
